<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="suggest"
    >
      <template #action>
        <div @click="clickSearch">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell v-for="item in list" :key="item" icon="search">
        <template #title>
          <div v-html="hightLight(item)" @click="clickSuggest(item)"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"> </van-cell>
      <van-cell
        @click="clickHistory(item)"
        :title="item"
        v-for="(item, index) in history"
        :key="item"
      >
        <van-icon name="close" @click.stop="del(index)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { getSuggestionList } from '@/api/search'
import { setHistory, getHistory } from '@/utils/storage'
// import _ from 'lodash'
export default {
  name: 'Search',
  data() {
    return {
      keyword: '', // 搜索关键字,
      // 用于存储推荐的数据
      list: [],
      history: getHistory() || []
    }
  },
  // computed: {
  //   showList() {
  //     const reg = new RegExp(this.keyword, 'gi')
  //     return this.list.map(item => {
  //       return item.replace(
  //         reg,
  //         key => `<span style="color: red;">${key}</span>`
  //       )
  //     })
  //   }
  // },
  methods: {
    // suggest: _.debounce(async function () {
    //   // 检查当前关键字是否为空
    //   if (this.keyword === '') return
    //   // 调用方法, 发送请求
    //   const res = await getSuggestionList(this.keyword)
    //   this.list = res.data.data.options
    // }, 500)
    suggest() {
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        if (!this.keyword) return
        const res = await getSuggestionList(this.keyword)
        this.list = res.data.data.options
      }, 500)
    },
    hightLight(str) {
      // 把这个字符串中包含keyword的地方高亮
      const reg = new RegExp(this.keyword, 'gi')
      return str.replace(reg, `<span style="color: red">${this.keyword}</span>`)
    },
    clickSearch() {
      if (!this.keyword) return
      // 把结果保存在历史记录中
      // this.history.unshift(this.keyword)
      this.addSearch(this.keyword)
    },
    clickSuggest(item) {
      // this.history.unshift(item)
      this.addSearch(item)
    },
    clickHistory(item) {
      this.addSearch(item)
    },
    // 1.把原来的对应的关键字的记录给删除
    // 2. 把关键字添加放到最前面
    async addSearch(word) {
      this.history = this.history.filter(item => item !== word)
      this.history.unshift(word)
      await this.$nextTick()
      // setHistory(this.history)
      // 跳转到结果页面
      this.$router.push({
        path: '/result',
        query: {
          keyword: word
        }
      })
    },
    del(index) {
      this.history.splice(index, 1)
      // setHistory(this.history)
    }
  },
  watch: {
    history(value) {
      setHistory(this.history)
    }
  }
}
</script>

<style lang="" scoped>
</style>
